<template>
  <!-- 最外层容器：绑定全局样式（手册2.2.1 容器嵌套规范） -->
  <view class="index-container">
    <!-- 1. 轮播滑块：补充图片懒加载（手册2.5.1 性能优化） -->
    <view class="swiper-container">
      <swiper 
        :indicator-dots="true"
        :autoplay="true"
        :interval="5000"
        :duration="1000"
        circular
        indicator-dots-class="custom-indicator"
      >
        <swiper-item v-for="slide in slideList" :key="slide.id">
          <!-- 手册2.5.1：mode保持比例+lazy-load优化加载 -->
		  <!-- 懒加载：非首屏图片延迟加载，提升首屏速度 -->
          <image 
            :src="slide.imgUrl" 
            class="slide-img" 
            mode="aspectFill"
            lazy-load 
          ></image>
        </swiper-item>
      </swiper>
    </view>

    <!-- 2. 功能模块区：图标统一懒加载（手册2.5.1） -->
    <view class="function-modules">
      <view class="module-item" v-for="item in functionList" :key="item.id" @click="goToPage(item.path)">
		   <!-- 功能图标懒加载，减少初始资源请求 -->
        <image 
          :src="item.icon" 
          class="module-icon" 
          mode="widthFix"
          lazy-load 
        ></image>
        <text class="module-text">{{ item.name }}</text>
      </view>
    </view>

    <!-- 3. 书籍推荐区：保持结构，统一适配逻辑 -->
    <view class="book-recommend">
      <view class="recommend-title">
        <text class="title-text">文学书籍</text>
      </view>
      <view class="book-card">
        <image 
          src="/static/img/aesop.png" 
          class="book-img" 
          mode="widthFix"
          lazy-load
        ></image>
        <text class="book-name">伊索寓言</text>
        <text class="book-author">文文</text>
    </view>

    <!-- 新增：首页简易书籍列表 -->
    <view class="book-list">
      <view class="book-item" v-for="b in books" :key="b.id">
        <image :src="b.cover || '/static/img/default-item.png'" class="book-thumb" mode="aspectFill" @click="goDetail(b.id)"></image>
        <view class="book-meta" @click="goDetail(b.id)">
          <text class="book-title">{{ b.name }}</text>
          <text class="book-author">{{ b.author || '未知作者' }}</text>
        </view>
        <view class="book-actions">
          <button class="btn" @click="addToBookshelf(b.id)">加书架</button>
          <button class="btn primary" @click="addToCart(b.id)">借书车</button>
        </view>
      </view>
      <view class="loading" v-if="loading"><text>加载中...</text></view>
      <view class="nomore" v-else-if="!hasMore"><text>没有更多了</text></view>
    </view>
    </view>
  </view>
</template>

<script>
import { myRequest } from '@/util/request.js';
export default {
  name: "Index",  // 组件名与文件夹名一致
  data() {
    return {
      // 轮播图数据：绝对路径（手册2.5.1 静态资源引用规范）
      slideList: [
        { id: 1, imgUrl: "/static/img/swiper/slide1.png" },
        { id: 2, imgUrl: "/static/img/swiper/slide2.png" },
        { id: 3, imgUrl: "/static/img/swiper/slide3.png" }
      ],
      // 功能模块数据：与tabBar功能联动（预留扩展）
      functionList: [
        { id: 1, name: "借书车", icon: "/static/icon/borrow.png", path: "/pages/cart/cart" },  // 新增path：预留跳转逻辑
        { id: 2, name: "读书交流", icon: "/static/icon/communicate.png", path: "" },
        { id: 3, name: "快速查找", icon: "/static/icon/search.png", path: "/pages/search/search" }
      ],
      // 新增：首页书籍列表
      books: [],
      page: 1,
      pageSize: 6,
      hasMore: true,
      loading: false
    };
  },
  onShow() {
    this.page = 1;
    this.books = [];
    this.hasMore = true;
    this.fetchBooks();
  },
  onReachBottom() {
    if (!this.loading && this.hasMore) {
      this.page += 1;
      this.fetchBooks();
    }
  },
  methods: {
    // 预留功能模块跳转方法（手册1.6 代码可扩展原则）
     goToPage(path) {
       if (path) uni.navigateTo({ url: path });  // 手册API：uni.navigateTo跳转
     },
     async fetchBooks() {
       try {
         this.loading = true;
         const data = await myRequest({ url: `/api/books?page=${this.page}&pageSize=${this.pageSize}`, method: 'GET' });
         const list = Array.isArray(data.list) ? data.list : [];
         this.books = this.page === 1 ? list : this.books.concat(list);
         this.hasMore = !!data.hasMore;
       } catch (e) {
         console.error('获取图书失败', e);
       } finally {
         this.loading = false;
       }
     },
     async addToBookshelf(bookId) {
       try {
         await myRequest({ url: '/api/bookshelf', method: 'POST', data: { bookId } });
         uni.showToast({ title: '已加入书架', icon: 'success' });
       } catch (e) {}
     },
     async addToCart(bookId) {
       try {
         await myRequest({ url: '/api/cart', method: 'POST', data: { bookId, borrowDays: 14 } });
         uni.showToast({ title: '已加入借书车', icon: 'success' });
       } catch (e) {}
     },
     goDetail(id) {
       uni.navigateTo({ url: `/pages/bookInfo/bookInfo?id=${id}` });
     }
  }
};
</script>

<style scoped lang="scss">
/* 全局变量扩展：统一硬编码值，符合手册1.7 样式管控规范 */
$nav-bg-color: #3E88F0;
$page-bg-color: #F5F7FA;
$page-padding: 20rpx;
$border-radius: 20rpx;
$text-dark: #333333;
$text-light: #999999;
$white-color: #FFFFFF;  // 补充白色变量，替换硬编码
$swiper-height: 422rpx;
$module-icon-size: 162rpx;
$book-img-width: 280rpx;  // 书籍封面宽度变量
$book-img-height: 380rpx; // 书籍封面高度变量
$shadow-color: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);  // 阴影变量

/* 页面基础样式（手册1.7 page选择器用法） */
page {
  background-color: $page-bg-color;
  padding: $page-padding;
}
.index-container {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
  /* H5端适配：手册6.3 条件编译 */
  /* #ifdef H5 */
  padding: 30rpx;
  border-radius: $border-radius;
  /* #endif */
}

/* 轮播滑块样式（手册2.2.3 跨平台适配） */
.swiper-container {
  width: 100%;
  border-radius: $border-radius;
  overflow: hidden;
  /* #ifdef H5 */
  margin-top: 10rpx;
  /* #endif */
}
swiper {
  width: 750rpx;  // 手册1.7：750rpx=屏幕宽度，响应式适配
  height: $swiper-height;
}
.slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;  // 手册2.5.1：保持图片比例填充容器
}
/* 通用轮播指示器样式（跨平台兼容，手册2.2.3） */
.custom-indicator {
  bottom: 20rpx;
}
/* 替换微信专属类，使用uni-app通用指示器类名 */
.custom-indicator .uni-swiper-dot {
  width: 12rpx;
  height: 12rpx;
  margin: 0 8rpx;
  background-color: rgba($white-color, 0.6);  // 变量嵌套，保持统一
}
.custom-indicator .uni-swiper-dot-active {
  background-color: $nav-bg-color;  // 与导航栏颜色统一
}

/* 功能模块样式（手册2.2.1 flex布局） */
.function-modules {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 40rpx;
  margin-top: 20rpx;
}
.module-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200rpx;
  /* 新增点击反馈：提升交互体验 */
  &:active {
    opacity: 0.8;
  }
}
.module-icon {
  width: $module-icon-size;
  height: $module-icon-size;
  border-radius: $border-radius;
}
.module-text {
  font-size: 32rpx;
  color: $text-dark;
  margin-top: 15rpx;
}

/* 书籍推荐区样式（变量统一，手册2.2.1） */
.book-recommend {
  background-color: $white-color;  // 替换硬编码
  border-radius: $border-radius;
  padding: 25rpx;
  box-shadow: $shadow-color;  // 使用阴影变量
}
.recommend-title {
  margin-bottom: 20rpx;
  border-bottom: 1rpx solid #EEEEEE;
}
.title-text {
  font-size: 34rpx;
  font-weight: bold;
  color: $text-dark;
}
.book-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.book-img {
  width: $book-img-width;  // 使用宽度变量
  height: $book-img-height; // 使用高度变量
  border-radius: 15rpx;
}
.book-name {
  font-size: 36rpx;
  color: $text-dark;
  margin-top: 20rpx;
  font-weight: 500;
}
.book-author {
  font-size: 28rpx;
  color: $text-light;
  margin-top: 10rpx;
}

/* 新增：首页书籍列表样式 */
.book-list { margin-top: 20rpx; display: flex; flex-direction: column; gap: 20rpx; }
.book-item { display: flex; gap: 20rpx; background: #fff; border-radius: 16rpx; padding: 20rpx; align-items: center; }
.book-thumb { width: 140rpx; height: 180rpx; border-radius: 10rpx; background: #f5f5f5; }
.book-meta { flex: 1; display: flex; flex-direction: column; gap: 6rpx; }
.book-title { font-size: 30rpx; color: #333; font-weight: 600; }
.book-author { font-size: 24rpx; color: #999; }
.book-actions { display: flex; gap: 16rpx; }
.btn { padding: 10rpx 20rpx; font-size: 26rpx; border-radius: 40rpx; background: #fff; color: #3E88F0; border: 2rpx solid #3E88F0; }
.btn.primary { background: #3E88F0; color: #fff; border-color: #3E88F0; }
.loading, .nomore { text-align: center; color: #999; padding: 20rpx 0; }
</style>